<template>
  <div>
    <cus-cell
      title="跳转模式"
      :border="false"
      v-if="
        editConfigCom.attribute &&
        editConfigCom.attribute.hasOwnProperty('navigateType')
      "
    >
      <div class="u-slot-value">
        <u-radio-group
          v-model="editConfigCom.attribute.navigateType"
          style="flex-wrap: wrap"
          :activeColor="$theme.themeColor.primary"
        >
          <u-radio
            :customStyle="{ marginLeft: '8px', marginTop: '10px' }"
            v-for="(item, index) in navigateOptions"
            :key="index"
            :label="item.name"
            :name="item.value"
            size="1rem"
          >
          </u-radio>
        </u-radio-group>
      </div>
    </cus-cell>
    <!--                外部链接  start-->
    <cus-cell
      title="外部链接"
      :border="false"
      v-if="
        editConfigCom.attribute &&
        editConfigCom.attribute.hasOwnProperty('url') &&
        editConfigCom.attribute.navigateType === NAVIGATE_TYPE.OUTSIDE
      "
    >
      <view class="u-slot-value">
        <u--input
          placeholder="请输入外部链接"
          border="surround"
          v-model="editConfigCom.attribute.url"
        ></u--input>
      </view>
    </cus-cell>
    <!--                外部链接  end-->
    <!--                应用自身  start-->
    <cus-cell
      title="应用页面"
      :border="false"
      v-if="
        editConfigCom.attribute &&
        editConfigCom.attribute.hasOwnProperty('path') &&
        editConfigCom.attribute.navigateType === NAVIGATE_TYPE.SELF
      "
    >
      <div slot="title">
        页面选择:
        <text class="choose-page" @click="handleChoosePage">{{
          editConfigCom.attribute.path ? "更改" : "选择"
        }}</text>
      </div>
      <div class="u-slot-value">
        <div
          style="width: 100%; margin-bottom: 5px"
          v-if="
            editConfigCom.attribute.navigateOptions &&
            editConfigCom.attribute.navigateOptions.name
          "
        >
          页面：{{ editConfigCom.attribute.navigateOptions.name }}
        </div>
        <div class="flex-align-items-center navigate-input">
          <span style="margin-right: 5px">路径:</span>
          <u--input
            placeholder="请输入应用自身路径"
            border="surround"
            v-model="editConfigCom.attribute.path"
          ></u--input>
        </div>
      </div>
    </cus-cell>
    <!--                应用自身  end-->
    <!--                企业客服  start-->
    <cus-cell
      :border="false"
      v-if="
        editConfigCom.attribute &&
        editConfigCom.attribute.hasOwnProperty('serviceChatUrl') &&
        editConfigCom.attribute.navigateType === NAVIGATE_TYPE.SERVICE_CHAT
      "
    >
      <div class="u-slot-value">
        <div class="flex-align-items-center navigate-input">
          <span style="margin-right: 5px">客服链接：</span>
          <u--input
            placeholder="请输入客服链接"
            border="surround"
            v-model="editConfigCom.attribute.serviceChatUrl"
          ></u--input>
        </div>
        <div
          class="flex-align-items-center navigate-input"
          style="margin-top: 10px"
        >
          <span style="margin-right: 5px">企业ID：</span>
          <u--input
            placeholder="请输入企业ID"
            border="surround"
            v-model="editConfigCom.attribute.serviceChatID"
          ></u--input>
        </div>
      </div>
    </cus-cell>
    <!--                企业客服  end-->
    <navigate-modal
      :show.sync="isShowNavigation"
      ref="navigateModalRef"
      @confirm="handleInsetPagePath"
    />
  </div>
</template>

<script>
import { NAVIGATE_TYPE } from "@/const/widget";
import { navigateTypeOptions } from "@/components/navigateConfig/config";

export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      navigateOptions: navigateTypeOptions,
      isShowNavigation: false,
      NAVIGATE_TYPE,
    };
  },
  methods: {
    handleInsetPagePath(e) {
      this.editConfigCom.attribute.path = e.path;
      this.editConfigCom.attribute.navigateOptions = e;
      this.isShowNavigation = false;
    },
    handleChoosePage() {
      this.$refs.navigateModalRef.open(
        this.editConfigCom?.attribute?.navigateOptions
      );
      this.isShowNavigation = true;
    },
  },
};
</script>

<style scoped lang="scss">
.choose-page {
  margin-left: 10px;
  color: $u-primary;
  border-bottom: 1px solid $u-primary;
}
.navigate-input {
  width: 100%;
}
</style>
